<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>属性选择器</title>

		<style>
			.red{
				color: red;
			}
			.goldenrod{
				color: goldenrod;
			}
			.darkred{
				color: darkred;
			}
			.blue{
				color: blue;
			}
			.slateblue{
				color: slateblue;
			}
			.blueviolet{
				color: blueviolet;
			}

			/*
			属性选择器:
			属性是相对于标签而言,所谓属性选择器就是根据指定名称属性的值来查找元素
			*/

			/*1. E[attr] 查找拥有style属性的li标签*/
			li[style]{
				/*下划线了解一下*/
				text-decoration: underline;
			}

			/*2. E[attr=value] 严格匹配,查找拥有class属性并且值等于red的li标签*/
			li[class=red]{
				font-size: 30px;
			}

			/*3. E[attr*=value] 严格匹配,查找拥有class属性并且值包含red的li标签*/
			li[class*=red]{
				/*这里替换了上面的严格匹配*/
				font-size: 35px;
			}

			/*4. E[attr^=value] 严格匹配,查找拥有class属性并且值以blue开头的li标签*/
			li[class^=blue]{
				/*这里替换了上面的严格匹配*/
				background-color: #aaaaaa;
			}

			/*5. E[attr$=value] 严格匹配,查找拥有class属性并且值以red结尾的li标签*/
			li[class$=red]{
				/*这里替换了上面的严格匹配*/
				color: darkgreen;
			}

		</style>





	</head>
	<body>



	<ol type="A">

		<li class="red" style="">我是第一行</li>
		<li class="goldenrod">我是第二行</li>
		<li class="darkred" style="">我是第三行</li>
		<li class="blue">我是第四行</li>
		<li class="slateblue">我是第五行</li>
		<li class="blueviolet">我是第六行</li>

	</ol>



	</body>
</html>
